<script setup lang="ts">
import { ElTabPane, ElTabs, ElButton, ElCheckbox } from 'element-plus';
import Nifi from '../../nifi';
import { reactive, ref } from 'vue';

import { transToTime } from "../../util"

const { id, nifi } = defineProps<{ id: string, nifi: Nifi }>()

const emits = defineEmits<{ close: [] }>()
//
const onlyShowModify = ref(false)
const data = reactive<any>({})

const init = async () => {
    const t = await nifi.Provenance.detail(id);
    Object.assign(data, t)
}
init();
const DETAIL_KEYS = [
    {key:"eventTime",label:"Event Time"},
    {key:"eventDuration",label:"Event Duration",handle:(d:any) => transToTime(d.eventDuration)},
    {key:"lineageDuration",label:"Lineage Duration",handle:(d:any) => transToTime(d.lineageDuration)},
    {key:"eventType",label:"Event Type"},
    {key:"flowFileUuid",label:"FlowFile Uuid"},
    {key:"fileSize",label:"File Size"},
    {key:"componentId",label:"Component Id"},
    {key:"componentName",label:"Component Name"},
    {key:"componentType",label:"Component Type"},
    {key:"detail",label:"Details"},
]

const CONTENT_KEYS = [{key:'input',label:"Input Claim"},{key:'output',label:"Output Claim"}]
const CONTENT_AVAILABLE = "ContentAvailable"
const CONTENT_ATTR_KEYS = [
    {key:"ContentClaimContainer",label:"Container"},
    {key:"ContentClaimSection",label:"Section"},
    {key:"ContentClaimIdentifier",label:"Identifier"},
    {key:"ContentClaimOffset",label:"Offset"},
    {key:"ContentClaimFileSize",label:"Size"},
]

const handleDownload = () => {}
const handleView = () => {}
const handleReplay = () => {}



</script>

<template>
    <div class="w-50vw h-50vh flex flex-col">
        <ElTabs class="h-full w-full">
            <ElTabPane class="h-full" label="详情">
                <div class="w-full h-full flex overflow-auto scrollbar-thin pr-8px">
                    <div class="min-h-full flex flex-col justify-around flex-1 p-x-20px">
                        <template v-for="t in DETAIL_KEYS">
                            <div class="min-h-40px"><span class="c-#aaa">{{t.label}}</span><span class="ml-2em c-#666">{{
                                t.handle?.(data) || data[t.key] }}</span></div>
                        </template>
                    </div>
                    <div class="min-w-400px min-h-full p-x-20px">
                        <fieldset class="w-full">
                            <legend class="fw-bold c-primary">Parent FlowFiles( {{ data.parentUuids?.length }} )</legend>
                            <div>
                                <template v-for="t in (data.parentUuids || [])">
                                    <div>{{ t }}</div>
                                </template>
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend class="fw-bold c-primary">Child FlowFiles( {{ data.childUuids?.length }} )</legend>
                            <div>
                                <template v-for="t in (data.childUuids || [])">
                                    <div>{{ t }}</div>
                                </template>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </ElTabPane>
            <ElTabPane class="h-full" label="属性">
                <div class="w-full h-full flex flex-col overflow-hidden p-x-20px box-border">
                    <div class="h-40px flex gap-2em items-center ">
                        <div class="fw-bold c-primary">Attribute Values</div>
                        <div>
                            <ElCheckbox v-model="onlyShowModify">只显示修改的属性</ElCheckbox>
                        </div>
                    </div>
                    <div class="w-full flex-1 overflow-auto scrollbar-thin pr-8px">
                        <template v-for="d in (data.attributes || [])">
                            <div class="min-h-40px" v-if="!onlyShowModify || !d.previousValue || d.value != d.previousValue"><span class="c-#aaa">{{ d.name }}</span><span
                                    class="ml-2em c-#666">{{ d.value }}</span></div>
                        </template>
                    </div>
                </div>
            </ElTabPane>
            <ElTabPane class="h-full" label="内容">
                <div class="w-full h-full overflow-auto scrollbar-thin pr-8px">
                    <div class="flex">
                        <template v-for="c in CONTENT_KEYS">
                        <div class="min-h-full h-fit  flex-1 p-x-20px">
                            <div class="h-40px fw-bold c-primary">{{ c.label }}</div>
                            <div v-if="data[`${c.key}${CONTENT_AVAILABLE}`]">
                                <template v-for="t in CONTENT_ATTR_KEYS">
                                    <div class="min-h-40px">
                                        <span class="c-#aaa">{{t.label}}</span>
                                        <span class="ml-2em c-#666">{{data[c.key + t.key] }}</span>
                                    </div>
                                </template>
                                <div>
                                    <ElButton @click="handleDownload">下载</ElButton>
                                    <ElButton @click="handleView">查看</ElButton>
                                </div>
                            </div>
                        </div>
                    </template>
                    </div>
                    
                    <!--  -->
                    <div v-if="data.replayAvailable">
                        <div>Replay</div>
                        <div>
                            <div>Connection Id</div>
                            <div>{{ data.sourceConnectionIdentifier }}</div>
                        </div>
                        <ElButton @click="handleReplay">Replay</ElButton>
                    </div>
                </div>
            </ElTabPane>
        </ElTabs>
    </div>
</template>